<template>
  <div class="demand-iteration">
    <van-nav-bar fixed placeholder title="需求列表" left-arrow @click-left="onClickLeft" />
    <van-tabs wrap-class="vant-tabs" :active="active" title-active-color="#739ECA" title-inactive-color="#666" color="#739ECA" line-width="16px" line-height="2px" @change="onChange">
      <van-tab v-for="tab in tabsTo" :key="tab.id" :title="tab.label" :name="tab.id">
        <ze-scroll :exclude-tabbar="true" @scrolltolower="handleScrolltolower" @refresherrefresh="handleRefresh">
          <iteration-list :list-data="requireLists" @getRequire="getRequire" />
          <uni-load-more class="demand-more" :status="loadMoreStatus" />
        </ze-scroll>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import iterationList from '../overview/component/iteration-list.vue'
import ZeScroll from '@/components/ze-scroll/index.vue'
import { deleteDemandList, getDemandList, getDemandpageList } from '@/apis/command.js'
import { getProjectMainTask } from '@/apis/project'
import { getDeviceInfo } from '@/utils/storage'
export default {
  components: {
    ZeScroll,
    iterationList,
  },
  props: {
    datas: {
      type: Object,
    },
  },
  data() {
    return {
      loadMoreStatus: 'more',
      statusBarHeight: '0',
      navbarHeight: '0',
      total: 0,
      projectId: '',
      show: false,
      active: 0,
      project: '',
      pageNo: 1,
      pageSize: 10,
      projectBtn: 0,
      tabsTo: [
        { id: 0, label: '全部' },
        { id: 1, label: '未关闭' },
        { id: 2, label: '指派给我' },
      ],
      requireLists: [],
    }
  },
  created() {
    this.setHeight()
  },
  mounted() {
    this.getRequire()
  },
  methods: {
    // 设置高度
    setHeight() {
      const { screenHeight, statusBarHeight, navbarHeight } = getDeviceInfo()
      this.statusBarHeight = statusBarHeight
      this.navbarHeight = navbarHeight
      this.swiperHeight = screenHeight - statusBarHeight - navbarHeight - 142
    },
    // tab改变事件
    onChange(value) {
      this.projectBtn = value.detail.name
      this.getRequire()
    },
    // 返回
    onClickLeft() {
      uni.navigateBack() // 直接使用 navigateBack
    },
    async getRequire() {
      uni.showLoading({
        title: '查询中',
      })
      if (this.pageNo > 1) {
        this.loadMoreStatus = 'loading'
      }
      const params = { pageNo: this.pageNo, pageSize: this.pageSize, id: this.datas.id }
      if (this.projectBtn === 1) {
        params.taskStatus = 'closed'
      } else if (this.projectBtn === 2) {
        params.commander = '1'
      }
      const res = await getProjectMainTask(params)
      const { total, records } = res
      if (this.pageNo === 1) {
        this.requireLists = records
      } else {
        this.requireLists = [...this.requireLists, ...records]
      }
      this.loadMoreStatus = this.requireLists.length >= total ? 'noMore' : 'more'
      uni.hideLoading()
    },
    handleScrolltolower() {
      this.loadMore()
    },
    async loadMore() {
      if (['noMore', 'loading'].includes(this.loadMoreStatus)) {
        return
      }
      this.pageNo += 1
      this.getRequire()
    },
    async handleRefresh() {
      this.pageNo = 1
      this.loadMoreStatus = 'loading'
      await this.getRequire()
      this.loadMoreStatus = 'more'
    },
  },
}
</script>
<style lang="scss" scoped>
.over-project{
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 93%;
	margin: 0 auto;
	.over-select{
		width: 80px;
	}
	.over-img{
		img{
			width:20px;
			height:20px;
		}
	}
}
</style>
<style lang="scss">
.vant-tabs{
	box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.06) !important;
}
.demand-more{
	::v-deep view{
		height:55px !important;
		text{
			height:100%;
		}
	}
}
</style>
